<template>
  <div class="department-management">
    <div class="header">组织管理</div>
    <el-row>
      <el-col :span="24" class="top-bar">
        <el-button
          type="primary"
          icon="el-icon-plus"
          class="add-department-btn"
          @click="handleAdd"
        >
          新增组织
        </el-button>
        <el-input
          placeholder="组织名称"
          class="search-box"
          clearable
          v-model="formInline.search"
          @blur="search"
        ></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :data="tableData" border>
          <el-table-column label="权限代码" prop="id"></el-table-column>
          <el-table-column prop="name" label="组织名称"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column prop="createUser" label="创建人"></el-table-column>
          <el-table-column prop="isEnabled" label="是否启用">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isEnabled"
                active-value="1"
                inactive-value="0"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
  <template slot-scope="scope">
    <el-button type="text" v-if="scope.row.isEnabled === '1'" @click="lookNext(scope.row)">查看</el-button>
    <el-button
      v-if="scope.row.isEnabled === '1'"
      type="text"
      @click="handleEdit(scope.row)"
    >编辑</el-button>
    <el-popconfirm
      v-if="scope.row.isEnabled === '1'"
      @confirm="deleteDepartment(scope.row)"
      title="确定删除该数据吗？"
      style="margin-left: 8px"
    >
      <el-button type="text" slot="reference">删除</el-button>
    </el-popconfirm>
  </template>
</el-table-column>
        </el-table>
        <div class="flex-container">
          <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="pageSizeOptions"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
        </div>

        <!-- 新增模态框 -->
        <el-dialog
          title="新增组织"
          :visible="isAddDialogVisible"
          @close="handleAddDialogClose"
          width="600px"
        >
          <div class="dialog-content">
            <el-form :model="newDepartment" label-position="top">
              <el-form-item label="组织代码">
                <el-input
                  v-model="newDepartment.id"
                  class="custom-input"
                ></el-input>
              </el-form-item>
              <el-form-item label="组织名称">
                <el-input
                  v-model="newDepartment.name"
                  class="custom-input"
                ></el-input>
              </el-form-item>
              <el-form-item label="创建时间">
                <el-date-picker
                  v-model="newDepartment.createtime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="创建人">
                <el-input
                  v-model="newDepartment.createUser"
                  class="custom-input"
                ></el-input>
              </el-form-item>
              <el-form-item label="是否启用">
                <el-switch
                  v-model="newDepartment.isEnabled"
                  active-value="1"
                  inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                ></el-switch>
              </el-form-item>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="handleAddDialogClose">取消</el-button>
            <el-button type="primary" @click="handleAddDepartment"
              >确认</el-button
            >
          </div>
        </el-dialog>
        <!-- 编辑模态框 -->
        <el-dialog
          title="编辑组织"
          :visible="isEditDialogVisible"
          @close="handleEditDialogClose"
          width="600px"
        >
          <div class="dialog-content">
            <el-form :model="editDepartment" label-position="top">
              <el-form-item label="组织代码">
                <el-input
                  v-model="editDepartment.id"
                  class="custom-input"
                ></el-input>
              </el-form-item>
              <el-form-item label="组织名称">
                <el-input
                  v-model="editDepartment.name"
                  class="custom-input"
                ></el-input>
              </el-form-item>
              <el-form-item label="创建时间">
                <el-date-picker
                  v-model="editDepartment.createTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="创建人">
                <el-input
                  v-model="editDepartment.createUser"
                  class="custom-input"
                ></el-input>
              </el-form-item>
              <el-form-item label="是否启用">
                <el-switch
                  v-model="editDepartment.isEnabled"
                  active-value="1"
                  inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                ></el-switch>
              </el-form-item>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="handleEditDialogClose">取消</el-button>
            <el-button type="primary" @click="handleSaveDepartment"
              >确认</el-button
            >
          </div>
        </el-dialog>
        <!-- 查看模态框 -->
        <el-dialog
          title="查看组织"
          :visible="isViewDialogVisible"
          @close="handleViewDialogClose"
          width="600px"
        >
          <div class="dialog-content">
            <el-form :model="viewDepartment" label-position="top">
              <el-form-item label="组织代码">
                <el-input
                  v-model="viewDepartment.id"
                  class="custom-input"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="组织名称">
                <el-input
                  v-model="viewDepartment.name"
                  class="custom-input"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="创建时间">
                <el-input
                  v-model="viewDepartment.createTime"
                  class="custom-input"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="创建人">
                <el-input
                  v-model="viewDepartment.createUser"
                  class="custom-input"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="是否启用">
                <el-switch
                  v-model="viewDepartment.isEnabled"
                  active-value="1"
                  inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  disabled
                ></el-switch>
              </el-form-item>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="handleViewDialogClose">关闭</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageSizeOptions: [5, 4, 3],
      formInline: {
        search: "",
      },
      newDepartment: {
        id: "",
        name: "",
        createTime: "",
        createUser: "",
        isEnabled: "",
      },
      viewDepartment: {
        id: "",
        name: "",
        createTime: "",
        createUser: "",
        isEnabled: "",
      },
      editDepartment: {
        id: "",
        name: "",
        createTime: "",
        createUser: "",
        isEnabled: "",
      },
      data: [],
      tableData: [],
      total: 0,
      page: 1,
      count: 5,
      isAddDialogVisible: false,
      isEditDialogVisible: false,
      isViewDialogVisible: false,
      isConfirmDeleteVisible: false,
      confirmDeleteDepartment: null,
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    handleSizeChange(v) {
  this.count = v;
  this.page = 1;
  this.getData();
},
    handleCurrentChange(v) {
      console.log(v);
      this.page = v;
      this.getData();
    },
    getData() {
      this.$axios
        .get("/list", {
          params: {
            q: `${this.formInline.search}`,
            _page: this.page,
            _limit: this.count,
          },
          headers: {
            "X-Total-Count": "true",
          },
        })
        .then(({ data, headers }) => {
          this.total = Number(headers["x-total-count"]);
          this.tableData = data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    search() {
      this.page = 1;
      this.getData();
    },
    handleAdd() {
      this.isAddDialogVisible = true;
      this.newDepartment = {
        id: "",
        name: "",
        createTime: "",
        createUser: "",
        isEnabled: "",
      };
    },
    handleAddDialogClose() {
      this.isAddDialogVisible = false;
    },
    handleAddDepartment() {
      console.log("新增部门：", this.newDepartment);
      this.isAddDialogVisible = false;
      this.$axios
        .post("/list", {
          id: this.newDepartment.id,
          name: this.newDepartment.name,
          createTime: this.newDepartment.createTime,
          createUser: this.newDepartment.createUser,
          isEnabled: this.newDepartment.isEnabled,
        })
        .then(({ data }) => {
          if (data) {
            this.$message({
              message: "添加成功",
              type: "success",
              duration: 1400,
            });
            this.newDepartment.id = "";
            this.newDepartment.name = "";
            this.newDepartment.createTime = "";
            this.newDepartment.createUser = "";
            this.newDepartment.isEnabled = "";
            this.getData();
          } else {
            alert("添加失败");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleEdit(row) {
      this.isEditDialogVisible = true;
      this.editDepartment = { ...row };
    },
    handleSaveDepartment() {
      console.log("编辑部门：", this.editDepartment);
      this.isEditDialogVisible = false;
      this.$axios
        .put(`/list/${this.editDepartment.id}`, {
          name: this.editDepartment.name,
          createTime: this.editDepartment.createTime,
          createUser: this.editDepartment.createUser,
          isEnabled: this.editDepartment.isEnabled,
        })
        .then(({ data }) => {
          if (data) {
            this.$message({
              message: "更新成功",
              type: "success",
              duration: 1400,
            });
            this.getData();
          } else {
            alert("更新失败1");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleEditDialogClose() {
      this.isEditDialogVisible = false;
    },
    handleViewDialogClose() {
      this.isViewDialogVisible = false;
    },
    lookNext(row) {
      this.isViewDialogVisible = true;
      this.viewDepartment = { ...row };
    },
    handleDelete(row) {
      console.log("删除部门:", row);
      this.confirmDeleteDepartment = row;
      this.isConfirmDeleteVisible = true;
    },
    deleteDepartment(row) {
      const index = this.tableData.indexOf(row);
      if (index !== -1) {
        this.$axios
          .delete(`/list/${row.id}`)
          .then(({ data }) => {
            if (data) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1400,
              });
              this.tableData.splice(index, 1);
              if (index === 0 && this.page > 1) {
                this.page--;
              }
              this.getData();
            } else {
              alert("删除失败");
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
      this.resetConfirmDelete();
    },
    resetConfirmDelete() {
      this.isConfirmDeleteVisible = false;
      this.confirmDeleteDepartment = null;
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
.dialog-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 52px);
}
.dialog-content .el-form-item .el-input {
  width: 400px;
}
.department-management {
  width: 100%;
  padding: 20px;
  position: relative;
  background-color: #fff;
  margin-top: -60px;
}
.header {
  width: calc(100%-20px);
  height: 60px;
  border: 1px solid #eee; /* 修改为0 */
  line-height: 60px;
  padding-left: 20px;
  font-size: 20px;
  margin: -20px -20px 20px -20px;
}
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.add-department-btn {
  margin-bottom: 10px;
}

.search-box {
  width: 300px;
  margin-bottom: 10px;
}

.department-table {
  margin-top: 40px;
}

.department-table td {
  padding: 6px 0;
  height: 28px;
}

.department-table td div {
  display: flex;
  align-items: center;
}

.department-table td i {
  font-size: 14px;
}

.department-table td .el-switch {
  margin-left: 30px;
}

.department-table .el-table__expanded-cell,
.department-table .el-table__expanded-cell td {
  height: 28px;
}

.department-table .el-table__expanded-cell:before {
  content: "";
  position: absolute;
  top: -8px;
  left: 12px;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #e5e9f2;
  border-left: 10px solid transparent;
  border-top: none;
}

.child-row {
  display: none;
}

.expanded-row > .child-row {
  display: table-row;
}

.expanded-row td {
  padding-top: 0;
  padding-bottom: 0;
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
  padding-right: 650px;
}
.jump-to-page {
  margin-top: -30px;
  margin-left: 600px;
  width: 200px;

  .jump-input {
    width: 80px;
    margin-left: 10px;
  }

  .el-button {
    margin-left: 10px;
  }
}
.data-total {
  margin-top: -30px;
}
</style>
